<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #22252b;height:71px;color: #ffffff">
        <el-row>
          <el-col :span="7" style="text-align: right">
            <img src="../assets/zhaocaiwa.png">
          </el-col>
          <el-col :span="7">
            <el-menu mode="horizontal" style="background-color: #22252b;border-bottom:none !important; ">
              <el-menu-item style="color: white" @click="router.push('/cityList')">深圳[切换城市]</el-menu-item>
              <el-menu-item style="color: white" @click="router.push('/jobList')">岗位</el-menu-item>
              <el-menu-item style="color: white" @click="router.push('/companyList')">企业</el-menu-item>
              <el-menu-item style="color: white" @click="router.push('/jobFairs')">招聘会</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="10">
            <el-menu mode="horizontal" style="background-color: #22252b;border-bottom:none !important;">
              <el-menu-item style="color: white" @click="router.push('/resumeList')">我的简历</el-menu-item>
              <el-menu-item style="color: white" @click="router.push('/candidateRecords')">我要招聘</el-menu-item>
              <el-dropdown style="height: 20px;color: white;margin-top: 18px">
                <span class="el-dropdown-link" >
                 {{username}}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer class="company-footer">
        <el-row class="footer-container">
          <!-- 关于我们 -->
          <el-col :xs="24" :sm="12" :md="6" class="footer-section">
            <h3>关于我们</h3>
            <p>我们是一家致力于提供优质产品和服务的创新企业。</p>
            <div class="social-media">
              <el-link :underline="false" href="#" class="social-icon">
                <el-icon><Share /></el-icon>
              </el-link>
              <el-link :underline="false" href="#" class="social-icon">
                <el-icon><ChromeFilled /></el-icon>
              </el-link>
              <el-link :underline="false" href="#" class="social-icon">
                <el-icon><Pointer /></el-icon>
              </el-link>
              <el-link :underline="false" href="#" class="social-icon">
                <el-icon><ChatDotRound /></el-icon>
              </el-link>
            </div>
          </el-col>

          <!-- 快速链接 -->
          <el-col :xs="24" :sm="12" :md="6" class="footer-section">
            <h3>快速链接</h3>
            <el-menu mode="vertical" class="footer-menu">
              <el-menu-item index="1"><el-link :underline="false" href="#">首页</el-link></el-menu-item>
              <el-menu-item index="2"><el-link :underline="false" href="#">产品服务</el-link></el-menu-item>
              <el-menu-item index="3"><el-link :underline="false" href="#">解决方案</el-link></el-menu-item>
              <el-menu-item index="4"><el-link :underline="false" href="#">客户案例</el-link></el-menu-item>
              <el-menu-item index="5"><el-link :underline="false" href="#">新闻中心</el-link></el-menu-item>
            </el-menu>
          </el-col>

          <!-- 联系我们 -->
          <el-col :xs="24" :sm="12" :md="6" class="footer-section">
            <h3 @click="router.push('/contactUs')">联系我们</h3>
            <ul class="contact-info">
              <li>
                <el-icon><Location /></el-icon>
                中国北京市朝阳区某某路123号
              </li>
              <li>
                <el-icon><Phone /></el-icon>
                400-888-8888
              </li>
              <li>
                <el-icon><Message /></el-icon>
                contact@company.com
              </li>
              <li>
                <el-icon><AlarmClock /></el-icon>
                周一至周五 9:00-18:00
              </li>
            </ul>
          </el-col>

          <!-- 订阅我们 -->
          <el-col :xs="24" :sm="12" :md="6" class="footer-section">
            <h3>订阅我们</h3>
            <p>订阅我们的新闻通讯，获取最新产品信息</p>
            <el-form class="subscribe-form">
              <el-input placeholder="您的邮箱地址">
                <template #append>
                  <el-button type="primary">订阅</el-button>
                </template>
              </el-input>
            </el-form>
          </el-col>
        </el-row>

        <div class="footer-bottom">
          <el-divider />
          <div class="copyright">
            &copy; 2023 某某科技有限公司. 保留所有权利
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup>
import router from "@/router";
// 导入Element Plus图标
import {
  Share,
  ChromeFilled,
    Pointer,
    ChatDotRound,
    Location,
    Phone,
    Message,
    AlarmClock,
  ArrowDown
} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
const username = ref('游客')

onMounted(() => {
  const userStr = localStorage.getItem('user')
  if (userStr) {
    try {
      const user = JSON.parse(userStr)
      username.value = user.username || '未知用户'
    } catch (e) {
      console.error('解析用户信息失败:', e)
    }
  }
})

const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  router.push('/login')
}
</script>
<style scoped>
.company-footer {
  background-color: #2e3f51;
  color: white;
  height: 315px;
  text-align: center;
  padding: 40px 0 0;
  font-size: 14px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-section {
  margin-bottom: 30px;
  text-align: center;
  background-color: #2c3e50;
  color: white;
}

.footer-section h3 {
  color: white;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-section p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.social-media {
  display: flex;
  gap: 15px;
}

.social-icon {
  color: white;
  font-size: 18px;
  transition: color 0.3s;
}

.social-icon:hover {
  color: #409eff;
}

.footer-menu {
  border-right: none;
  background-color: transparent;
}

.footer-menu :deep(.el-menu-item) {
  height: 36px;
  line-height: 36px;
  padding: 0 !important;
}

.contact-info {
  list-style: none;
  padding: 0;
}

.contact-info li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subscribe-form {
  margin-top: 15px;
}

.footer-bottom {
  text-align: center;
  padding: 20px 0;
  background-color: #f1f1f1;
  margin-top: 30px;
}

.copyright {
  color: white;
  font-size: 13px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .footer-section {
    text-align: center;
  }

  .social-media {
    justify-content: center;
  }

  .footer-menu {
    display: inline-block;
  }
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>